<!--
 * @Date: 2022-11-12 12:20:16
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-29 12:51:10
 * @FilePath: \vue-admin-ts\src\views\main\system\role\role.vue
 * @Description: role
-->
<template>
  <div>
    <div class="form_warrper">
      <page-search
        :searchFormOpt="searchConfig.searchFormOpt"
        @search="searchHandle"
        @reset="reset"
      ></page-search>
    </div>

    <page-content
      :contentConfig="contentConfig"
      pageName="role"
      title="角色列表"
      ref="pageContentRef"
    >
    </page-content>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import pageSearch from "@/views/main/components/pageSearch/index.vue";
import pageContent from "@/views/main/components/pageContent/index.vue";
import { roleTableOptions, roleFormItems } from "./options";
import { IPageSearchProps } from "../../components/pageSearch/type";
import { usePageSearch } from "@/hooks/usePageSearch";
const [pageContentRef, searchHandle, reset] = usePageSearch();
const searchConfig = reactive<IPageSearchProps>({
  searchFormOpt: {
    formItems: roleFormItems,
    colLayout: {
      span: 12,
    },
    attrs: {
      labelWidth: "100px",
    },
  },
});
const contentConfig = reactive({
  tableOptions: roleTableOptions,
  pageConfig: {
    paginationAlign: "right",
  },
  attrs: {
    border: true,
    showIndex: true,
    pagination: true,
  },
});
const colLayout = {
  span: 6,
};
</script>
<style lang="less" scoped>
.form_warrper {
  padding-right: 20px;
}
</style>
